@extends("admin.layout.main")

@section("content")
    <div id="app">

        <Modal v-model="addShowModal" title="添加/编辑"  :mask-closable="false" width="25%" @on-ok="addScm">
            <div>
                <span v-if="add.id != ''">
                    ID:
                   <i-input  disabled v-model="add.id"></i-input>
                </span>
                <span style="margin: 10px 10px 10px 10px">
                    供应链:
                  <i-input placeholder="请填写供应链名称" v-model="add.scm_name" long></i-input>
                </span>
                <span style="margin: 10px 10px 10px 10px">
                    店铺:
                  <i-input placeholder="请填写店铺名称" v-model="add.shop_name" long></i-input>
                </span>
            </div>
        </Modal>

        <Row type="flex" align="middle">

                <span>
                    供应链:
                     <i-input v-model="scm_name" style="width:200px"></i-input>
                </span>

                <span>
                    店铺:
                     <i-input v-model="shop_name" style="width:200px"></i-input>
                </span>

                <span style="padding-left: 10px">
                      <i-button type="primary" @click="getList">查询</i-button>
                </span>

                <span style="padding-left: 10px">
                      <i-button type="primary" @click="addShowClick">添加</i-button>
                </span>
        </Row>
        <Row type="flex" justify="center" align="middle" style="margin: 10px">
                <i-table ref="selection" :data="tableData" :columns="tableColumns" stripe
                         style="width: 100% !important;">
                </i-table>
        </Row>

        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="getList">

                </Page>
            </i-col>
        </Row>

    </div>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    token:'',
                    tableData: [],
                    tableColumns: [
                        {
                            title: '供应链',
                            key: 'scm_name',
                        },
                        {
                            title:'店铺',
                            key:'shop_name',
                        },
                        {
                            title: "操作",
                            key: 'action',
                            render: (h, params) => {
                                return h('div', [
                                    h('i-button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            'click': ()=>{
                                                this.editClick(params.row);
                                            }
                                        }
                                    }, "编辑"),
                                    h('i-button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            'click': ()=>{
                                                this.$Modal.confirm({
                                                    title: '是否要删除？',
                                                    onOk:function(){
                                                        vm.del(params.row);
                                                    }
                                                });

                                            }
                                        }
                                    }, "删除")


                                ]);

                            }
                        },

                    ],
                    spinShow:false,
                    page: {
                        total: 0,
                        current: 1,
                        pageSize: 50,
                    },
                    shop_name:'',
                    scm_name:'',
                    add:{
                        id:'',
                        shop_name:'',
                        scm_name:''
                    },
                    addShowModal:false
                }
            },
            mounted(){
                this.token = window.localStorage.getItem('current_user');
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                getList(page = 1) {
                    let that = this;
                    this.spinShow = true;
                    axios.get("/admin/scm/list",{
                        params: {
                            token:vm.token,
                            shop_name: that.shop_name,
                            scm_name: that.scm_name,
                            page:page,
                        }
                    })
                    .then(function (response) {
                        vm.tableData = response.data.result.data;
                        vm.page.total = response.data.result.total;
                        vm.page.current = response.data.result.current_page;
                        vm.page.pageSize = response.data.result.per_page;
                        that.spinShow = false;
                    });
                },
                addScm(){
                    let that = this;
                    this.spinShow = true;
                    axios.get("/admin/scm/change",{
                        params: {
                            token:vm.token,
                            shop_name: that.add.shop_name,
                            scm_name: that.add.scm_name,
                            id:that.add.id,
                        }
                    })
                    .then(function (response) {
                        that.getList(1);
                        that.spinShow = false;
                    });
                },
                editClick(row){
                    this.addShowModal   =   true;
                    this.add.id = row.id;
                    this.add.shop_name = row.shop_name;
                    this.add.scm_name = row.scm_name;
                },
                addShowClick(){
                    this.addShowModal   =   true;
                    this.add.id = '';
                    this.add.shop_name = '';
                    this.add.scm_name = '';
                },
                del(row){  //delete
                    this.spinShow = true;
                    $.ajax({
                        type:'get',
                        url :"/admin/scm/delete",
                        data:{'id':row.id,'token':this.token},
                        success:function(response){
                            if(response.code   ==  400){
                                vm.$Message.error(response.msg);
                            }else{
                                vm.$Message.success(response.msg);
                            }
                            vm.spinShow = false;
                            vm.getList(1);

                        }
                    })
                }

            },

        });

        vm.token = getToken();
        vm.getList(1);

    </script>

@endsection

